<div class="ledger-modal">
    <div class="btn icon-close" ng-click="$ctrl.onClose()"></div>

    <div class="matcher-mode" ng-if="$ctrl.mode === 'sign-matcher'">
        <div class="ledger margin-3" ng-if="$ctrl.isLedger">
            <div class="device-img">
                <div class="display">
                    <div w-i18n="modal.sign.confirm"></div>
                    <div w-i18n="modal.sign.request"></div>
                </div>
            </div>
        </div>

        <div class="keeper" ng-if="$ctrl.isKeeper">
            <div class="device-img margin-3 keeper-icon"></div>
        </div>

        <h3 class="text-center basic-700" w-i18n="modal.sign.confirmRequest"></h3>
        <div class="bottom-wrapper text-center info-text margin-05 body-2 basic-500"
             w-i18n="modal.sign.confirmRequestToMatcher"></div>
        <div ng-if="$ctrl.isLedger"
             class="text-center info-text margin-05 body-2 basic-500"
             w-i18n="modal.sign.confirmRequestLedger"></div>

        <div ng-if="$ctrl.isKeeper"
             class="text-center info-text body-2 basic-500"
             w-i18n="modal.sign.confirmRequestKeeper"></div>

        <div class="txinfo__row one-line-border">
            <div class="txinfo__key" w-i18n="modal.sign.requestId"></div>
            <div class="txinfo__value">{{$ctrl.txId}}</div>
        </div>
        <w-loader></w-loader>
    </div>

    <div class="create-order-mode" ng-if="$ctrl.mode === 'create-order'">

        <div class="create-order-icon ledger-icons"></div>

        <div class="create-order-amounts">
            <h3 class="basic-700 text-center">
                <span ng-if="$ctrl.txData.orderType === 'buy'">
                    +<span w-i18n="money-currency" params="{money: $ctrl.txData.amount}"></span>
                </span>
                <span ng-if="$ctrl.txData.orderType === 'sell'">
                    +<span w-i18n="money-currency" params="{money: $ctrl.total}"></span>
                </span>
            </h3>

            <div class="text-center margin-05 body-2 basic-500">
                 <span ng-if="$ctrl.txData.orderType === 'sell'">
                    —<span w-i18n="money-currency" params="{money: $ctrl.txData.amount}"></span>
                </span>
                <span ng-if="$ctrl.txData.orderType === 'buy'">
                    —<span w-i18n="money-currency" params="{money: $ctrl.total}"></span>
                </span>
            </div>
        </div>

        <div class="create-order-cont">
            <div class="txinfo__row">
                <div class="txinfo__key">
                    <span>{{::$ctrl.txData.priceAsset.name}}</span> <span w-i18n="modal.sign.price"></span>
                </div>
                <div class="txinfo__value nowrap" w-i18n="money-currency" params="{money: $ctrl.txData.price}"></div>
            </div>

            <div class="txinfo__row">
                <div class="txinfo__key"
                     w-i18n="modal.sign.txId">
                </div>
                <div class="txinfo__value nowrap">{{::$ctrl.txId}}</div>
            </div>

            <div class="txinfo__row">
                <div class="txinfo__key"
                     w-i18n="modal.sign.fee">
                </div>
                <div class="txinfo__value nowrap" w-i18n="money-currency" params="{money: $ctrl.txData.matcherFee}"></div>
            </div>
        </div>

        <div class="bottom-wrapper">
            <div ng-if="$ctrl.isLedger" class="loading-text text-center basic-500 caption-1 margin-top-3 margin-3"
                 w-i18n="modal.sign.signByLedger"></div>
            <div ng-if="$ctrl.isKeeper" class="loading-text text-center basic-500 caption-1 margin-top-3 margin-3"
                 w-i18n="modal.sign.signByKeeper"></div>
            <w-loader></w-loader>
        </div>
    </div>

    <div class="cancel-order-mode" ng-if="$ctrl.mode === 'cancel-order'">
        <div class="cancel-order-icon ledger-icons"></div>
        <div class="create-order-amounts">
            <h3 class="basic-700 text-center" w-i18n="modal.sign.cancelOrder"></h3>
        </div>

        <div class="create-order-cont">
            <div class="txinfo__row">
                <div class="txinfo__key"
                     w-i18n="modal.sign.txId">
                </div>
                <div class="txinfo__value nowrap">{{::$ctrl.txId}}</div>
            </div>
        </div>
        <div class="bottom-wrapper">
            <div ng-if="$ctrl.isLedger" class="loading-text text-center basic-500 caption-1 margin-top-3 margin-3"
                 w-i18n="modal.sign.signByLedger"></div>
            <div ng-if="$ctrl.isKeeper" class="loading-text text-center basic-500 caption-1 margin-top-3 margin-3"
                 w-i18n="modal.sign.signByKeeper"></div>
            <w-loader></w-loader>
        </div>
    </div>

</div>
